let userName = document.getElementById('username');
let inputRoom = document.getElementById('room');
let btnConnect = document.getElementById('connect');
let outPutArea = document.getElementById('output');
let inputArea = document.getElementById('input');
let btnSend = document.getElementById('send');

let socket = io(); // 创建socket实例
let room;

btnConnect.onclick = function() {
    // connect
    socket.connect();

    //receive message
    socket.on('joined', (data, id,room) => {
        outPutArea.value = outPutArea.value + data + '\n';
        inputArea.disabled = false;
        btnSend.disabled = false;
    });

    socket.on('leaved', (room, id) => {
        btnConnect.disabled = false;
        inputArea.disabled = true;
        btnSend.disabled = true;
    });

    socket.on('message', (data, id, room) => {
        outPutArea.value = outPutArea.value + data + '\n';
    });

    //send message
    room = inputRoom.value;
    socket.emit('join', room, userName.value);
}

btnSend.onclick = function() {
    let data = inputArea.value;
    data = userName.value + ': ' + data;
    socket.emit('message', room, data);
    inputArea.value = '';
}




